<template>
  <div class="slide home-join wrapper">
    <el-carousel class="slide-left" trigger="click" height="310px">
      <el-carousel-item v-for="item in survey" :key="item.id">
        <!-- <img :src="item.img"> -->
        <div class="bg" :style="{ backgroundImage: `url(${item.img})` }">
          <div class="text">
            <div class="from">{{ item.job }}</div>
            <div class="desc">{{ item.text }}</div>
            <div class="desc-product">{{ item.font }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="ttq">
      <div class="ttq-title">欢迎关注卷叔填填圈</div>
      <img class="gzh-pic" src="../assets/17.png">
      <div class="ttq-search">公众号搜索“卷叔填填圈”</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      survey: [
        {
          id: 1,
          job: '在校学生',
          text: '轻松赚取',
          font: '奖励红包和惊喜礼物',
          img: 'https://wj.qq.com/image/pc/act/join_1@2x.jpg',
        },
        {
          id: 2,
          job: '企业管理者',
          text: '优先获得',
          font: '腾讯问卷行业报告',
          img: 'https://wj.qq.com/image/pc/act/join_2@2x.jpg',
        },
        {
          id: 3,
          job: '自由职业者',
          text: '亲自参与',
          font: '产品优化与迭代',
          img: 'https://wj.qq.com/image/pc/act/join_3@2x.jpg',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.slide{
  display: flex;
  background: #fff;
}

.bg {
  background-position: px;
  background-size: cover;
  width: 745px;
  height: 100%;
}

.slide-left {
  width: 745px;
}

.ttq{
  line-height: 1.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 308px;
  margin: auto auto;
  width: 295px;
  font-size: 16px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0 4px 4px 0;
}

.ttq-title{
  position: relative;
  top: -2px;
  border-radius: 4px;
  line-height: 34px;
  height: 34px;
  background-color: #f63a59;
  color: #fff;
  text-align: center;
  font-size: 1.17em;
  font-family: tencentFont2, 'PingFang SC',
  tahoma, arial, 'helvetica neue', 'hiragino sans gb',
  'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
}

.ttq-search{
  position: relative;
  left: -2px;
  font-size: 16px;
  color: #f63a59;
}

.gzh-pic{
  position: relative;
  top: -2px;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 180px;
  height: 180px;
}

.ttq-title{
  width: 180px;
}

.from{
  font-size: 18px;
  position: relative;
  top: -16px;
}

.text {
  position: absolute;
    top: 70px;
    left: 40px;
    font-size: 38px;
    color: #fff;
    line-height: 52px;
    text-shadow: 0px 2.5px 2.5px rgba(0, 0, 0, 0.1);
}

.desc{
  position: relative;
  top: -4px;
}

.desc-product{
  position: relative;
  top: -4px;
}

@font-face {
  font-family: 'tencentFont2';
  src: url('../assets/fontmin2.ttf');
}

.home-join {
  border-radius: 4px;
  overflow: hidden;
}

</style>

<style >

.home-join .el-carousel__button{
  border-radius: 50%;
  height: 10.5px;
  width: 10.5px;
  position: relative;
  top: 3px;
}

.home-join .el-carousel__indicators--horizontal {
  left: 70px;
  bottom: 20px;
}
</style>
